<template>
	<view class="photoBox">
		<view class="addBox" v-for="(item, index) in imageUrlList" :key="index">
			<image @click="see(item)" class="addImage" :src="item.filePath"></image>
			<image @click="deleteImage(index)" v-if="!canSee" class="commonSingleBoxImage" src="../static/cyry.png"></image>
		</view>
		<view class="addBox" @click="chosePhoto" v-if="!canSee">
			<image class="image" src="../static/tjfh.png"></image>
		</view>
	</view>
</template>

<script>
import {
	getToken
} from '../api/byfz';
import {
	config
} from '../config/config';
import {
	preView
} from '../utils/util';
export default {
	props: {
		value: {
			default: null,
			type: String
		},
		canSee: {
			default: false
		},
		index: {
			default: -1
		}
	},
	data() {
		return {
			imageUrlList:this.value?JSON.parse(this.value):[]
		};
	},
	methods: {
		updateProp() {
			this.$emit('updateUpload', JSON.stringify(this.imageUrlList), this.index)
		},
		deleteImage(index) {
			let newList = [];
			for (let i = 0; i < this.imageUrlList.length; i++) {
				if (i !== index) {
					newList.push(this.imageUrlList[i])
				}
			}
			this.imageUrlList = newList;
			this.updateProp()
		},
		see(item) {
			preView(item.filePath, 'image', '')
		},
		uploadImage(filePath) {
			uni.uploadFile({
				url: config.apiBaseUrl + 'common/upload/',
				filePath: filePath,
				name: 'file',
				fileType: "image", //ZFB必填,不然报错
				header: {
					Authorization: getToken()
				},
				success: (result) => {
					const obj = JSON.parse(result.data);
					if (obj.code === 200) {
						console.log("this.imageUrlList==",this.imageUrlList);
						this.imageUrlList.push({
							filePath: obj.url,
						})
						this.updateProp()
					}else{
						uni.showToast({
							title: obj.msg,
							icon: 'error'
						})
					}
				},
				fail: (err) => {
					uni.showToast({
						title: '网络异常，上传失败!',
						icon: 'error'
					})
				},
			});
		},
		chosePhoto() {
			uni.chooseImage({
				count: 4,
				sizeType: ['original', 'compressed'],
				sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
				success: (res) => {
					const tempFilePaths = res.tempFilePaths;
					for (let item of tempFilePaths) {
						this.uploadImage(item)
					}
				},
				file: (res) => {
					uni.showToast({
						title: '网络异常，上传失败!',
						icon: 'error'
					})
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.photoBox {
	display: flex;
	flex-wrap: wrap;
	padding-right: 20rpx;
	padding-left: 40rpx;
}



.addBox {
	width: 151rpx;
	height: 151rpx;
	background: #DADADA;
	border-radius: 7rpx 7rpx 7rpx 7rpx;
	opacity: 1;
	border: 0rpx solid #FFFFFF;
	position: relative;
	z-index: 1;
	margin-right: 20rpx;
	margin-top: 10rpx;
	margin-bottom: 10rpx;

	.addImage {
		width: 151rpx;
		height: 151rpx;
		border-radius: 7rpx 7rpx 7rpx 7rpx;
	}

	.commonSingleBoxImage {
		position: absolute;
		right: -18rpx;
		top: -18rpx;
		width: 37rpx;
		height: 37rpx;
		background: #C9C9C9;
		border-radius: 37rpx;
		opacity: 1;
		border: 0rpx solid #FFFFFF;
	}

	.image {
		position: absolute;
		left: 50rpx;
		right: 50rpx;
		top: 50rpx;
		bottom: 50rpx;
		width: 51rpx;
		height: 51rpx;
		z-index: 2;
	}
}
</style>